<template>
  <!-- 推荐 -->
  <div class="dstribution">
    <!-- 二维码 -->
    <!-- <div id="qrcode" class='clearfloat'>
      <canvas ref="qrcode" class='qrcodeBox'></canvas>
      <span v-show="false" :title="pcQrcodeURL" class="invitLink pull-left ellipsis" v-text="pcQrcodeURL" ></span>
      <el-button
        class="url-copy"
        type="primary"
        v-clipboard:error="onError"
        v-clipboard:copy="pcQrcodeURL"
        v-clipboard:success="onCopy">复制链接</el-button>
    </div> -->
        <el-card class="qrcode" shadow="never">
          <div slot="header">
            <span class='qrcode-title'>我的推荐</span>
            <el-button
            class="qrcode-btn"
            type="primary"
            v-clipboard:error="onError"
            v-clipboard:copy="pcQrcodeURL"
            v-clipboard:success="onCopy">复制链接</el-button>
            <span class='qrcode-title ml20 mr20'>我的邀请码</span>
            <span class="finish bold f20">{{$store.state.user.invitation_code}}</span>
          </div>
          <div id="qrcode" class='clearfloat'>
            <canvas ref="qrcode" class='qrcodeBox'></canvas>
            <span v-show="false" :title="pcQrcodeURL" class="invitLink pull-left ellipsis" v-text="pcQrcodeURL" ></span>
          </div>

        </el-card>
    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="70%">
      <el-table-column show-overflow-tooltip label="ID" width="60" align="center">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*tableSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="姓名" align="center" prop='name' sortable='custom'></el-table-column>
      <!-- <el-table-column show-overflow-tooltip label="手机号" align="center" prop='phone' sortable='custom'></el-table-column>
      <el-table-column show-overflow-tooltip label="当月申报" align="center" prop='orders_month_count' sortable='custom'></el-table-column>
      <el-table-column show-overflow-tooltip label="累计申报" align="center" prop='orders_count' sortable='custom'></el-table-column> -->
      <el-table-column show-overflow-tooltip label="注册时间" align="center" prop='created_at' sortable='custom'></el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
			:page-sizes="pageSizes"
      :page-size="Number(pageSize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import QRCode from "qrcode"; // 引入qrcode
export default {
  data() {
    return {
      parentId: null,
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      pageSizes: [25, 50], //一页可以几条,
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      paramsByDistribution: {},
      qrcodeURL: `http://m.mingyukehui.com/register?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}`,
      pcQrcodeURL: `http://mingyukehui.com/register?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}`,
    };
  },
  created () {
    this.getTableData()
  },
  mounted() {
    this.parentId = this.$store.state.user.id;
    this.createQrCode(
      "qrcode",
      this.qrcodeURL
    );
  },
  methods: {
    createQrCode(refName, payUrl) {
      QRCode.toDataURL(this.$refs[refName], payUrl, {
        width: 120,
        height: 120
      })
        .then(url => {})
        .catch(err => {
          // this.openMessage(0, '生成二维码失败')
        });
    },
    getTableData(args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByDistribution}
      this.$axios.get('api/distribution/child_list', {
        params: params
      })
      .then(res => {
        this.loading = false
        this.tableData = res.data.data
        this.pageSize = res.data.page.per_page
        this.total = res.data.page.total
      })
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.paramsByDistribution.page = 1
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.paramsByDistribution.page = val
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByDistribution.sort_str = column.prop
        this.paramsByDistribution.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByDistribution.sort_str = column.prop
        this.paramsByDistribution.sort_order = 'asc'
      } else {
        delete this.paramsByDistribution.sort_str
        delete this.paramsByDistribution.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    // 复制成功
    onCopy(e){
      this.$message({
        message:'复制成功！',
        type:'success'
      })
    },
    // 复制失败
    onError(e){
      this.$message({
        message:'复制失败！',
        type:'error'
      })
    },
  }
};
</script>

<style lang='less' type='text/css'>

  .dstribution {
    height: 100%; //撑满表格
    .el-table {
      width: 99.9% !important;
    }
    #qrcode {
      position: relative;
      // height: 40px;
      .qrcodeBox {
        float: left;
      }
      .url-copy {
        position: absolute;
        bottom: 5px;
        left: 5px;
      }
    }
    .qrcode {
      margin-top: 20px;
      margin-bottom: 20px;
      position: relative;

      &-title {
        font-size: 18px;
      }
      &-btn {
        margin-left: 30px;
      }
      // .url-copy {
      //   position: absolute;
      //   top: 50%;
      //   left: 150px;
      //   transform: translate(0, -50%);
      // }
    }

  }

</style>
